// 先把页面渲染一次
function xuran() {
    $("#tb").html("")
    $.ajax({
        url: "/get",
        success: function (res) {
            console.log(res);
            $.each(res, function (index, item) {
                let one = (`
                <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}岁</td>
                <td>${item.sex}</td>
                <td>
                <button class="layui-btn layui-btn-radius layui-btn-warm xiugai" _id=${item.id} _name=${item.name} _age=${item.age} _sex=${item.sex}>修改</button>
                <button class="layui-btn layui-btn-radius layui-btn-danger delete" index=${item.id}>删除</button>
                </td>
                </tr>
                `)
                $("tbody").append(one)
            });
        }
    })
}
xuran()


let layer;
let form;
layui.use(['layer', 'form'], function () {
    layer = layui.layer;
    form = layui.form;
    //添加学生信息
    $("form").on('submit', function (e) {
        e.preventDefault()
        let res = form.val("abc")
        $.ajax({
            url: "http://127.0.0.1:3000/add",
            type: "post",
            data: res,
            success: function (res) {
                xuran()
            }
        });


    })


    // 删除学生信息
    $("#tb").on("click", ".delete", function () {
        let uui = $(this).attr("index")
        console.log(uui);
        $.ajax({
            url: "http://127.0.0.1:3000/delate/:id",
            data: {
                id: uui
            },
            success: function (res) {
                xuran()
                console.log(res);
            }
        });
    })


    let add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form" lay-filter="abc1">
  <div class="layui-form-item">
    <label class="layui-form-label">id</label>
    <div class="layui-input-block">
      <input type="text" name="id" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="id">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="name">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="text" name="age" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="age">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="text" name="sex" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" id="sex">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
 </form>`;

    //修改学生信息
    $("#tb").on("click", ".xiugai", function (e) {
        e.preventDefault()
        let id = $(this).attr("_id");
        let name = $(this).attr("_name");
        let age = $(this).attr("_age");
        let sex = $(this).attr("_sex");

        let tanchuang = layer.open({
            type: 1,
            title: "修改学生信息",
            content: add_str,
            area: ['450px', '400px'],
        });
        form.val("abc1", {
            id: id,
            name: name,
            age: age,
            sex: sex
        });

        $("#add_form").on("submit", function (e) {
            e.preventDefault();
            let data = form.val("abc1")
            $.ajax({
                url: "http://127.0.0.1:3000/gai",
                type: "post",
                data: data,
                success: function (res) {
                    console.log(res);
                    layer.close(tanchuang);
                    xuran()
                }
            });

        });
    })









});